<template>
  <div>
     <div id="barMany" style="width: 800px; height: 400px;margin: 20px auto;"></div>
  </div>
</template>
<script>
export default {
  mounted(){
    this.markBarChart();
  },
  methods:{
    markBarChart(){
      // 1.初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('barMany'))
      // 2. 配置项准备
      let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          grid:{
            show:false
          },
          legend: {
            top:10,
            itemWidth:15,
            itemHeight:12,
            itemStyle:{ 
             
            },
            icon:"rect",//改变图例形状或自定义图标
            textStyle:{ //改变图例颜色
              color:"#fff"
            }
          },
          xAxis: {
            type: 'value',
            show:false,
            splitLine:{//去除网格线
                show:false
            },
          },
          yAxis: {
            axisLine:{  //y轴轴线隐藏
              show:false
           },
            splitLine:{//去除网格线
                show:false
            },
            axisLabel:{ //y轴的文字样式
              color:"#fff",
            },
            type: 'category',
            data: ['引体向上', '俯卧撑', '单杠', '负重爬楼']
          },
          series: [
            {
              barWidth:"10",
              name: '引体向上',
              type: 'bar',
              stack: 'total',
              itemStyle:{
                normal:{
                  color:'#d2f1ff',
                   borderRadius: 2, // 可选：柱体圆角
                  borderColor: 'green', // 边框颜色设置为绿色
                  borderWidth: 2 // 边框宽度，可根据需求调整
                },
                  
              },
              label: {// 柱状图顶部显示数值
                show: true,
                position:"top"
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
               barWidth:"10",
              name: '俯卧撑',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                  position:"top"
              },
               itemStyle:{
                normal:{
                  color:'#64eef0'
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
               barWidth:"10",
              name: '单杠',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                  position:"top"
              },
                itemStyle:{
                normal:{
                  color:'#00847c'
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
               barWidth:"10",
              name: '负重爬楼',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                  position:"top"
              },
              itemStyle:{
                normal:{
                  color:'#ff4b38'
                }
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330, 410]
            },
          
          ]
        }
           // 3. 使用配置项显示图表
      myChart.setOption(option)
    }
  }
}
</script>